<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="medicalTechnologyBusinessVolumeStatistics1">
        <div class="above">
          <ul>
            <li>
              <div class="tip"></div>
              <div class="data">
                <p>门诊急症总收入</p>
                <h4>14521 <span>万元</span> </h4>
              </div>
            </li>
            <li>
              <div class="tip"></div>
              <div class="data">
                <p>门诊急症总收入</p>
                <h4>14521 <span>万元</span> </h4>
              </div>
            </li>
          </ul>
        </div>

        <div class="bottom">
          <ul>
            <li>
              <h4>21122<span>万元</span></h4>
              <p>门急诊医疗总收入</p>
            </li>
            <li>
              <h4>21122<span>万元</span></h4>
              <p>门急诊医保医疗总收入</p>
            </li>
            <li>
              <h4>2112<span>万元</span></h4>
              <p>门急诊药品总收入</p>
            </li>
            <li>
              <h4>2112<span>万元</span></h4>
              <p>门急诊医保药品总收入</p>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="curId===1" class="chart-content" ref="medicalTechnologyBusinessVolumeStatistics2">
        <div class="above">
          <ul>
            <li>
              <div class="tip"></div>
              <div class="data">
                <p>门诊急症总收入2</p>
                <h4>14521 <span>万元</span> </h4>
              </div>
            </li>
            <li>
              <div class="tip"></div>
              <div class="data">
                <p>门诊急症总收入</p>
                <h4>14521 <span>万元</span> </h4>
              </div>
            </li>
          </ul>
        </div>

        <div class="bottom">
          <ul>
            <li>
              <h4>21122<span>万元</span></h4>
              <p>门急诊医疗总收入2</p>
            </li>
            <li>
              <h4>21122<span>万元</span></h4>
              <p>门急诊医保医疗总收入</p>
            </li>
            <li>
              <h4>2112<span>万元</span></h4>
              <p>门急诊药品总收入</p>
            </li>
            <li>
              <h4>2112<span>万元</span></h4>
              <p>门急诊医保药品总收入</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis4-yijiyewuliang',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
    makeData(){
      // 门急症患者年龄段统计
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];
      const data = [
            {
                name: '婴幼儿',
                value: 5600,
            },
            {
                name: '儿童期',
                value: 3600,
            },
            {
                name: '青少年',
                value: 1500,
            },
            {
                name: '青年',
                value: 2000,
            },
            {
                name: '中年',
                value: 899,
            },
            {
                name: '老年',
                value: 4000,
            },
        ];

      let option8={
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '-1%',
          top: 'center',
          //  itemGap: 40,
          selectedMode: true,
          icon: 'pin',
          textStyle: {
            rich: {
              a: {
                color: '#efefef',
                width: 10
              },
              b0: {
                color: '#73DDFF',
                fontSize: 12,
                padding: [0, 5, 0, 40]
              },
              b1: {
                color: '#73ACFF',
                fontSize: 12,
                padding: [0, 5, 0, 40]
              },
              b2: {
                color: '#FDD56A',
                fontSize: 12,
                padding: [0, 5, 0, 40]
              },
              b3: {
                color: '#FDB36A',
                fontSize: 12,
                padding: [0, 5, 0, 40]
              },
              b4: {
                color: '#FD866A',
                fontSize: 12,
                padding: [0, 5, 0, 40]
              },
              b5: {
                color: '#9E87FF',
                fontSize: 12,
                padding: [0, 5, 0, 40]
              }
            }
          },
          formatter: function(name) {
            let title = ''
            var total = 0;
            var target;
            var index;
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
                title = data[i].label
                index = i < 6 ? i : 5
              }
            }
            return `{a|${name}}{b${index}|${target}}`
          }

        },
        series: [{
          type: 'pie',
          center: ['37%', '47%'],
          radius: ['44%', '62%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 2,
          emphasis: {
            itemStyle: {
              borderColor: '#f3f3f3',
              borderWidth: 1
            }
          },
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{c}人',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 1,
                width: 1,
                height: 1,
                padding: [1, 1, 0, -4]
              },
              a: {
                padding: [-15, 7, -10, 7]
              }
            }
          },
          labelLine: {
            normal: {
              length: 10,
              length2: 15,
              lineStyle: {
                width: 1
              }
            }
          },
          data: data,
        }]
      }
      this.makeGraph(this.$refs.outPatientAge1,option8)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }

  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
        font-size: .11rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
        font-size: .11rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    // height:calc( (100vh - 1.23rem) / 3 - .3rem) ;
    // height:calc( (100vh - 1.23rem) * 4 / 10 - 0.36rem) !important;
    // height:calc( (100vh - 1.23rem) * 345 / 947 ) !important;
    height:calc( (100vh - 1.23rem) * 345 / 947 - 0.27rem) !important;
    overflow: hidden;
    .chart-content{
      width: 100%;
      // height:calc( (100vh - 1.23rem) / 3 - .3rem) ;
      // height:calc( (100vh - 1.23rem) * 4 / 10 - 0.36rem) !important;
      height:calc( (100vh - 1.23rem) * 345 / 947 - 0.27rem) !important;
      float: left;
      overflow: hidden;
      
      .above{
        margin-top:.1rem;
        ul{
          height: .57rem;
          padding:0; margin:0;
          list-style-type: none;
          li{
            width: 50%;
            padding:0; margin:0;
            list-style-type: none;
            display: inline-block;
            margin-top: .1rem;
            .tip{
              background:url('~@/assets/images/1026.png');
              background-size: contain;
              background-repeat: no-repeat;
              display: inline-block;
              vertical-align: top;
              width: .54rem;
              height: .54rem;
              margin-right:.1rem
            }
            .data{
              display: inline-block;
              vertical-align: top;
              p{
                padding:0; margin:0;
                padding-bottom: .1rem;
                font-size: .14rem;
                padding-left:.02rem;
                color:#69C4E3
              }
              h4{
                padding:0; margin:0;
                color: #ffffff;
                font-size:.2rem;
                span {
                  font-size:.14rem
                }
              }
            }
          }
        }
      }
      .bottom{
        margin-top:.15rem;
        ul{
          padding:0; margin:0;
          list-style-type: none;
          height: .57rem;
          li{
            padding:0; margin:0;
            list-style-type: none;
            background:url('~@/assets/images/1027.png');
            background-size: contain;
            background-repeat: no-repeat;
            height: .62rem;
            width: 50%;
            float: left;
            margin-top:.2rem;
            p{
              padding:0; margin:0;
              padding-left:.7rem;
              font-size:.12rem;
              color:#69C4E3;
              padding-top:.08rem;
            }
            h4{
              padding:0; margin:0;
              padding-left:.7rem;
              font-size: .18rem;
              padding-top:.14rem;
              color: #ffffff;
              span {
                font-size:.14rem
              }
            }
          }
        }
      }
    }
  }
  img{width: 100%;float: left;}
</style>